<template>
    <div>
        <div class="container">
            <el-page-header @back="goBack" content="卖货订单详情"></el-page-header>

            <el-descriptions class="e-m-t-45" :column="2" title="订单信息" border :labelStyle="{ width: '180px' }">
                <el-descriptions-item label="订单ID">{{ form.number }}</el-descriptions-item>
                <el-descriptions-item label="订单状态">
                    <span class="color-success" v-if="form.state == '已完结'">{{ form.state }}</span>
                    <span class="color-danger" v-else-if="form.state == '已撤销'">{{ form.state }}</span>
                    <span v-else class="color-warning">{{ form.state }}</span>
                </el-descriptions-item>
                <el-descriptions-item label="下单时间">{{ form.createddatetime }}</el-descriptions-item>
                <!-- <el-descriptions-item label="回收对象">
                    <span v-if="form.username == null && form.iccode">临时卡{{ form.iccode }}</span>
                    <span v-else-if="form.username && form.iccode">{{ form.username }}({{ form.iccode }})</span>
                    <span v-else>{{ form.username }}</span>
                </el-descriptions-item> -->
                <el-descriptions-item label="回收品类" v-if="form.product">{{ form.product.name }}</el-descriptions-item>
                <el-descriptions-item label="毛重（KG）">{{ form.grossweight }}</el-descriptions-item>
                <!-- <el-descriptions-item label="皮重（KG）">{{ form.tareweight }}</el-descriptions-item>
                <el-descriptions-item label="净重（KG）">{{ form.netweight }}</el-descriptions-item> -->
                <el-descriptions-item label="销售重量（KG）">{{ form.weight }}</el-descriptions-item>
                <el-descriptions-item label="负责小哥" v-if="form.brother">
                    <span>{{ form.brother.name }}</span>
                </el-descriptions-item>
                <el-descriptions-item label="录单人" v-if="form.staff">
                    <span>{{ form.staff.name }}</span>
                </el-descriptions-item>
                <el-descriptions-item label="卖货打包站 -> 后端厂商" span="2">
                    <div class="pack">
                        <div class="item" v-if="form.packstation">
                            <div class="name">{{ form.packstation.name }}</div>
                            <!-- <div class="text">
                                <i class="el-icon-location"></i><span>{{form.store.address}}</span>
                            </div> -->
                        </div>
                        <i class="el-icon-sort icon"></i>
                        <div class="item" v-if="form.manufacturer">
                            <div class="name">{{ form.manufacturer.name }}</div>
                            <!-- <div class="text">
                                <i class="el-icon-location"></i><span>{{form.store2.address}}</span>
                            </div> -->
                        </div>
                    </div>
                </el-descriptions-item>
                <el-descriptions-item label="销售证明" v-if="form.proves">
                    <div class="images-list">
                        <div class="item" v-for="(item, index) in form.proves" :key="index">
                            <el-image style="width: 150px; height: 150px; border-radius: 6px;" :src="fileURL + item"
                                :preview-src-list="[[fileURL + item]]" fit="cover"></el-image>
                        </div>
                    </div>
                </el-descriptions-item>
                <el-descriptions-item label="卖货备注" span="2" v-if="form.remarks">{{ form.remarks }}</el-descriptions-item>
                <el-descriptions-item label="撤销原因" span="2" v-if="form.reason">{{ form.reason }}</el-descriptions-item>
            </el-descriptions>

            <div class="e-m-t-45">
                <el-button @click="goBack">返回</el-button>
                <el-button type="primary" @click="completedOrder" v-if="form.state != '已完结' && form.state != '已撤销'">确定卖货</el-button>
                <el-button type="danger" v-if="form.state != '已撤销'" @click="showcancel = true">取消订单</el-button>
            </div>
        </div>
        <!-- 取消理由 -->
        <el-dialog title="取消订单" :visible.sync="showcancel" width="30%">
            <el-input type="textarea" :rows="5" placeholder="请输入取消订单的理由" v-model="textarea" maxlength="200">
            </el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="showcancel = false">取消</el-button>
                <el-button type="primary" @click="cancelOrderSubmit">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    layout: 'admin',
    head() {
        return {
            title: '卖货订单详情' 
        }
    },
    data() {
        return {
            retrievetableData: [],
            id: 0,
            form: {
                "id": 0,
                "number": "",
                "brother": {
                  "id": 0,
                  "name": ""
                },
                "staff": {
                  "id": 0,
                  "name": ""
                },
                "packStation": {
                  "id": 0,
                  "name": ""
                },
                "manufacturer": {
                  "id": 0,
                  "name": ""
                },
                "largeType": {
                  "id": 0,
                  "name": ""
                },
                "product": {
                  "id": 0,
                  "name": ""
                },
                "quantity": 0,
                "weight": 0,
                "grossWeight": 0,
                "sellAmount": 0,
                "sellPrice": 0,
                "costAmount": 0,
                "costPrice": 0,
                "profit": 0,
                "state": {},
                "proves": [],
                "remarks": "",
                "reason": "",
                "createdDateTime": ""
            },
            loading: false,
            // activeNames: []
            showcancel: false,
            textarea: ''
        }
    },
    mounted() {
        this.id = this.$route.query.id
        this.getDetails(this.id).then(()=>{
            this.sellForm.orderId = this.id
            this.sellForm.number = this.form.number
        })
    },
    methods: {
        goBack() {
            this.$router.go(-1)
        },
        getDetails(id) {
            this.retrievetableData = []
            return this.$axios.get('/PackStation/OutOrder/Details?Id=' + id).then((res) => {
                this.form = res
            })
        },
        cancelOrderSubmit() {
            this.$axios.post('/PackStation/OutOrder/Cancel', {
                id: this.id,
                reason: this.textarea,
            }).then((res) => {
                this.$message({
                    type: 'success',
                    message: res.msg
                });
                this.showcancel = false;
                this.textarea = "";
                this.getDetails(this.id)
            })
        },
        handleFilesSuccess(res, file) {
            this.sellForm.proves.push(res.path);
            this.$refs.form.validate()
        },
        loadType(node, resolve) { //加载品类
            const {
                level
            } = node;
            if (level == 0) {
                this.$axios.get('/Waste/Type/List').then((res) => {
                    node = res.map(function (c) {
                        return {
                            id: c.id,
                            name: c.name,
                            leaf: level >= 1
                        }
                    });
                    resolve(node);
                })
            } else {
                if (level == 1) {
                    this.$axios.get(`/Waste/product/List`, {
                        params: {
                            typeId: node.value
                        }
                    }).then((res) => {
                        node = res.map(function (c) {
                            return {
                                id: c.id,
                                name: c.name,
                                leaf: level >= 1
                            }
                        });
                        this.tempSmallTypeList = node
                        resolve(node);
                    })
                } else {
                    resolve();
                }
            }
        },
        SelectType(v) { //选择品类
            console.log(v)
            this.sellForm.id = v[1]
        }
    }
}
</script>

<style lang="scss" scoped>
.images-list {
    display: flex;

    .item {
        padding-right: 15px;
        position: relative;

        .el-icon-error {
            position: absolute;
            top: -8px;
            right: 7px;
            font-size: 22px;
            color: var(--red);
            background: #fff;
            border-radius: 50%;
            cursor: pointer;

            &:hover {
                color: #f00;
            }
        }
    }
}

.img {
    border-radius: 5px;
    margin-right: 15px;
}

.total {
    text-align: right;
    padding-top: 10px;
    color: var(--gray);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .bold {
        font-weight: bold;
        font-size: 18px;
        color: var(--orange);
    }
}

.pack {
    display: flex;
    align-items: center;

    .item {
        .name {
            font-size: 18px;
        }

        .text {
            color: var(--grey);
        }
    }

    .icon {
        font-size: 30px;
        padding: 0 40px;
        transform: rotate(90deg);
        color: var(--gray);
    }
}
</style>
